<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>骡窝日报详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/newsContent.css">
    <link rel="stylesheet" href="/css/audio.css">
    <script src="/js/audio/audio.js"></script>
    <script src="/js/common.js"></script>
    <script>
        var oPageNum;
        $(function () {
            oPageNum = $("#page_num");
            var id = getParams().id;
            var url;
            $.get("/newses/" + id, function (data) {
                $(".newsDetail").renderValues(data);
                setTimeout(function () {
                    $("#content p img").css("width", "100%").css("height", "100%");
                }, 20);
                $.get("/newses/" + data.type + "/recommends", {newsId: id}, function (data) {
                    $.each(data, function (index, value) {
                        var a = $("<a></a>").attr("href", "/newsContent.html?id=" + value.id);
                        $("<img></img>").addClass("d-block w-100").height('200px').attr("src", value.coverUrl).appendTo(a);
                        $("<span></span>").addClass("recommend").html(value.title + "   " + value.newsTime).appendTo(a);
                        var di = $("<div></div>").addClass("carousel-item").append(a);
                        di.appendTo($("#carouselExampleControls .carousel-inner"));
                    })
                    $("#carouselExampleControls .carousel-inner > div:first").addClass("active");
                })
            })
            var song = [
                {
                    'cover': '/img/audio/44.jpg',
                    'src': 'http://www.ytmp3.cn/down/48452.mp3',
                    'title': '大家一起学猫叫'
                },
                {
                    'cover': '/img/audio/u=127546022,3897300299&fm=26&gp=0.jpg',
                    'src': 'http://www.ytmp3.cn/down/51761.mp3',
                    'title': '恋爱循环-花澤香菜'
                },
                {
                    'cover': '/img/audio/zxy.jpg',
                    'src': 'http://www.ytmp3.cn/down/46972.mp3',
                    'title': '再见只是陌生人-庄心妍'
                },
                {
                    'cover': '/img/audio/zfj.jpg',
                    'src': 'http://www.ytmp3.cn/down/54900.mp3',
                    'title': '霜降-音阙诗听&赵方婧'
                },
                {
                    'cover': '/img/audio/zfj.jpg',
                    'src': 'http://www.ytmp3.cn/down/52497.mp3',
                    'title': '有美人兮-音阙诗听&王梓钰&赵方婧'
                }
            ];

            var audioFn = audioPlay({
                song: song,
                autoPlay: true  //是否立即播放第一首，autoPlay为true且song为空，会alert文本提示并退出
            });

            /* 向歌单中添加新曲目，第二个参数true为新增后立即播放该曲目，false则不播放 */
            audioFn.newSong({
                'cover': '/img/audio/zfj.jpg',
                'src': 'http://www.ytmp3.cn/down/44145.mp3',
                'title': '尽头-赵方婧'
            }, false);

            /* 暂停播放 */
            //audioFn.stopAudio();

            /* 开启播放 */
            //audioFn.playAudio();

            /* 选择歌单中索引为3的曲目(索引是从0开始的)，第二个参数true立即播放该曲目，false则不播放 */
            //audioFn.selectMenu(3,true);

            /* 查看歌单中的曲目 */
            //console.log(audioFn.song);

            /* 当前播放曲目的对象 */
            //console.log(audioFn.audio);
        });

        function myEvent(obj, ev, fn) {
            if (obj.attachEvent) {
                obj.attachEvent('on' + ev, fn);
            } else {
                obj.addEventListener(ev, fn, false);
            }
        }

        myEvent(window, 'load', function () {
            var oRTT = document.getElementById('gototop');
            var pH = 800;
            var timer = null;
            var scrollTop;
            var scrollHeight;
            window.onscroll = function () {
                scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

                scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
                if (scrollHeight - scrollTop < 800) {
                    var page = oPageNum.val();
                }

                if (scrollTop >= pH) {
                    oRTT.style.display = 'block';
                } else {
                    oRTT.style.display = 'none';
                }
                return scrollTop;
            };
            oRTT.onclick = function () {
                clearInterval(timer);
                timer = setInterval(function () {
                    var now = scrollTop;
                    var speed = (0 - now) / 10;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    if (scrollTop == 0) {
                        clearInterval(timer);
                    }
                    document.documentElement.scrollTop = scrollTop + speed;
                    document.body.scrollTop = scrollTop + speed;
                }, 10);
            }
        });
    </script>
</head>

<body>
<div class="newsDetail">
    <div>
        <a href="javascript:history.go(-1);" style="position: absolute;top: 10px;left: 22px;">
            <span><i class="fa fa-chevron-left fa-2x" style="color: white;"></i></span>
        </a>
        <img render-src="coverUrl">

        <div class="container">
            <div class="row typeRow">
                <div class="col-4">
                    <span class="type" render-html="typeName"></span>
                </div>
                <div class="col-2">
                </div>
                <div class="col-2">
                    <span>By</span>
                </div>
                <div class="col-4">
                    <span class="type">龙头儿的添狗</span>
                </div>
            </div>

            <div class="detail">
                <h2 class="title" render-html="title"></h2>
                <div class="content" render-html="newsContent.content" id="content"></div>
            </div>
        </div>
    </div>
    <div>
        <span>相关推荐</span>
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">

            </div>
            <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only"></span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only"></span>
            </a>
        </div>
    </div>
    <!-- <div>
         <span>评论区</span>
     </div>-->
</div>
<a href="javascript:" class="backtop" style="z-index: 99999;" id="gototop"></a>

<div class="audio-box">
    <div class="audio-container">
        <div class="audio-cover"></div>
        <div class="audio-view">
            <h3 class="audio-title">未知歌曲</h3>
            <div class="audio-body">
                <div class="audio-backs">
                    <div class="audio-this-time">00:00</div>
                    <div class="audio-count-time">00:00</div>
                    <div class="audio-setbacks">
                        <i class="audio-this-setbacks">
                            <span class="audio-backs-btn"></span>
                        </i>
                        <span class="audio-cache-setbacks">
							</span>
                    </div>
                </div>
            </div>
            <div class="audio-btn">
                <div class="audio-select">
                    <div class="audio-prev"></div>
                    <div class="audio-play"></div>
                    <div class="audio-next"></div>
                    <div class="audio-menu"></div>
                    <div class="audio-volume"></div>
                </div>
                <div class="audio-set-volume">
                    <div class="volume-box">
                        <i><span></span></i>
                    </div>
                </div>
                <div class="audio-list">
                    <div class="audio-list-head">
                        <p>☺龙头的爱慕披散</p>
                        <span class="menu-close">关闭</span>
                    </div>
                    <ul class="audio-inline">
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

</body>

</html>